<?php
/* @var $this ColumnController */
/* @var $dataProvider CActiveDataProvider */

$this->breadcrumbs=array(
	'Graphic editor',
);

//$this->menu=array(
//	array('label'=>'Create Column', 'url'=>array('create')),
//	array('label'=>'Manage Column', 'url'=>array('admin')),
//);
?>
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
<h1>Graph editor- New Graph</h1>
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'graph-configuration-form',
	'enableAjaxValidation'=>false,
)); ?>
<div class="row">
		<?php echo $form->labelEx($model,'name'); ?>
		<?php echo $form->textField($model,'name',array('size'=>50,'maxlength'=>50)); ?>
		<?php echo $form->error($model,'name'); ?>
	</div>

    	
 <div class="row">Select the type of graphic you want to configure<br/>

   
		<?php echo $form->labelEx($model,'type'); ?>
   <?php echo  $form->dropDownList($model,'type',array('Bars'=>'Bars','Scatter Plot'=>'Scatter Plot','Lines'=>'Lines'),array('width'=>'300px',));
					?>
</div>
<div class="row">
		<?php echo $form->labelEx($model,'xAxisLabel'); ?>
		<?php echo $form->textField($model,'xAxisLabel',array('size'=>50,'maxlength'=>50)); ?>
		<?php echo $form->error($model,'xAxisLabel'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'yAxisLabel'); ?>
		<?php echo $form->textField($model,'yAxisLabel',array('size'=>50,'maxlength'=>50)); ?>
		<?php echo $form->error($model,'yAxisLabel'); ?>
	</div>
<div id='log'></div>
<p>Select a data source to see the columns you want to add to the graphic</p>
<p><span>Select Datasource:</span>
<?php 
	echo $form->dropDownList($model,
		 'datasourceId',array('0'=>'-Please select Datasource-')+CHtml::listData($Datasource,'id','name')
		,array('id'=>'datasource', )
	);
?></p>

<!-- 
	Column Seleccionado.
-->
<input type="hidden" name="NumberOfColumns" id="NumberOfColumns" />
<div id='siguiente' style='display: none;'>
<p id='seleccion'></p>
<p><span>Select Series:</span><br/>
<?php 
	echo CHtml::checkBoxList(
		 'combo2',""
		,array()
		,array('id'=>'combo2')
	);
?></p>
<!-- 
	Boton de Pruebas
-->
<!--<button id='botonseleccion'>See Column Selected</button>-->

</div>
<div class="row">
		<?php echo $form->labelEx($model,'filter'); ?>
        <?php echo CHtml::textField('filtertext',"",array('size'=>50,'maxlength'=>50)); ?>
		<?php echo $form->hiddenField($model,'filter',array('size'=>50,'maxlength'=>50)); ?>
		<?php echo $form->error($model,'filter'); ?>
	</div>
<div class="row buttons">
		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
	</div>


<!-- 
	Area para mostrar errores
-->
<p id='reportarerror' style='color: red;'></p>

<script>
	// creamos un evento onchange para cuando el usuario cambie su seleccion
	// importante:  #combo1 hace referencia al ID indicado arriba con: array('id'=>'datasource')
	//
	$('#datasource').change(function(){
		var opcionSeleccionada = $(this);			// el <option> seleccionado
		var datasourceId = opcionSeleccionada.val();	// el "value" de ese <option> seleccionado
		//alert(datasourceId);
		if(datasourceId == 0) {
			$('#siguiente').hide('slow');
			return;
		}
		
		var action = 'index.php?r=column/GetColumns&dataSourceId='+datasourceId;

		// se pide al action la lista de columns de la categoria seleccionada
		//
		$('#reportarerror').html("");
		$.getJSON(action, function(listaJson) {
			//
			// el action devuelve los columns en su forma JSON, el iterador "$.each" los separará.
			//
			
			// limpiar el combo columns
			$('#combo2').find('input').each(function(){ $(this).remove(); });
			$('#combo2').find('label').each(function(){ $(this).remove(); });
			$('#combo2').find('br').each(function(){ $(this).remove(); });
			var cont=0;
			$.each(listaJson, function(key, column) {
				//
				// "column" es un objeto JSON que representa al modelo Producto
				// por tanto una llamada a: alert(column.nombre) dira: "camisas"
				$('#combo2').append("<label id='lblCheckboxGroup1_"+cont+"' for='"+column.name+"'><input type='checkbox' onclick='handleChange(this);' name='CheckboxGroup1' value="+column.columnId+" id='CheckboxGroup1_"+cont+"'>"+column.name+"</label><br/>");
				cont=cont+1;
			});
			$('#NumberOfColumns').val(cont);
			$('#seleccion').html("Ok, now select series to be showed in graph:");
			$('#siguiente').show('slow');
		}).error(function(e){ $('#reportarerror').html(e.responseText); });		
	});
	
	// para que cuando le des click muestre la seleccion
	//
	$('#botonseleccion').click(function(){
		alert("idcolumn es: "+$('#combo2').val());
	});
	function handleChange(cb) {
		var lista="";
		var lista2="";
			  var numColum= $('#NumberOfColumns').val();
			  
			  for(i=0;i<numColum;i++)
			  {
				 var id='#CheckboxGroup1_'+i;
				 var id2='#lblCheckboxGroup1_'+i;
				 if ($(id).attr('checked'))
				 {
				 	lista=lista+";"+$(id).val();
					lista2=lista2+";"+$(id2).attr('for');
				 }
			  }
			   $('#GraphConfiguration_filter').val(lista);
			   $('#filtertext').val(lista2);
		
			
		
	}
</script>



<?php $this->endWidget(); ?>
</div>
